<!--
 * @Author: Vi卡农
 * @Date: 2020-05-18 16:49:19
 * @LastEditTime: 2020-05-19 14:38:55
 * @Description: -个人中心-
 * @FilePath: \cshf_admin\src\views\userInfo.vue
--> 
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <userAvatar :user="user" />
            </div>
            <ul class="list-group list-group-striped userfoem_l">
              <li class="list-group-item">
                <i class="el-icon-user-solid"></i>
                用户名称
                <div class="pull-right">{{ user.username }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-phone"></i>
                手机号码
                <div class="pull-right">{{ user.mobile }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-message"></i>
                用户邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-s-home"></i>
                所属部门
                <div class="pull-right">{{ user.deptName }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-date"></i>
                创建日期
                <div class="pull-right">{{ user.createDate }}</div>
              </li>
              <li>
                <div class="text-right">
                  <userwx :user="user" />
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <div style="width:40%;margin:auto;">
            <el-form ref="form" :model="user" :rules="rules" label-width="80px">
              <!-- <el-form-item label="用户昵称" prop="nickName">
                <el-input v-model="user.realName" />
              </el-form-item>-->
              <el-form-item label="手机号码" prop="phonenumber">
                <el-input v-model="user.mobile" maxlength="11" />
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="user.email" maxlength="50" />
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="user.gender">
                  <el-radio :label="0">男</el-radio>
                  <el-radio :label="1">女</el-radio>
                  <el-radio :label="2">保密</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submit">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userAvatar from "./userAvatar";
import userwx from "./userwx";
export default {
  name: "Profile",
  components: { userAvatar, userwx },
  data() {
    return {
      user: { email: "", mobile: "",  gender: "" },
      rules: {
        // nickName: [
        //   { required: true, message: "用户昵称不能为空", trigger: "blur" }
        // ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        mobile: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      this.$http
        .get("/sys/user/info")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.user = res.data;
        })
        .catch(() => {});
    },
    //修改信息
    submit() {
      let _this = this;
      this.$http
        .put("/sys/user/selfUpdate", {
          realName: _this.user.realName,
          mobile: _this.user.mobile,
          email: _this.user.email,
          gender: _this.user.gender,
          id: _this.user.id
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("修改成功！");
        })
        .catch(() => {
          _this.BtnLoading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.userfoem_l {
  color: #777777;
  li {
    line-height: 30px;
    .pull-right {
      float: right;
    }
  }
}
</style>